<script setup lang="ts">
defineOptions({
  name: "FULLSCREEN_ALL_LEADERSCREEN"
});
import { queryWeatherNow } from "@/api/bench";
import fullScreen from "@/assets/svg/common/fullScreen.svg?component";
import { useFullscreen } from "@vueuse/core";
import dayjs from "dayjs";
import { onMounted, onUnmounted, ref } from "vue";
import BottomSection from "./components/BottomSection.vue";
import MiddleSection from "./components/MiddleSection.vue";
import TopSection from "./components/TopSection.vue";
import { usePolling } from "./components/hooks";
const { isFullscreen, toggle } = useFullscreen();
const clickTimer = ref<any>(null);
const clock = ref<string>("");
const key = ref(0);
// const visibilitychange = () => {
//   const isHidden = document.hidden;
//   if (!isHidden) {
//     key.value = new Date().getTime();
//   }
// };
onMounted(() => {
  const body = document.querySelector("body");
  body.className = "fullScreen"; // 解决异常滚动条的问题
  // document.addEventListener("visibilitychange", visibilitychange, true);
  init();
});
onUnmounted(() => {
  clearClock();
  // document.removeEventListener("visibilitychange", visibilitychange, true);
});
const init = async () => {
  const title = "领导驾驶舱";
  document.title = title;
  startClock();
  getWeatherNow();
};
const weatherData = ref<any>({});
const getWeatherNow = async () => {
  const dateTime = dayjs().format("YYYY-MM-DD");
  const data = await queryWeatherNow(dateTime);
  weatherData.value = data?.now || {};
};
// 轮询
usePolling(getWeatherNow, {
  pollingInterval: 10 * 60 * 1000
});
// 获取当前时间
const startClock = () => {
  clearClock();
  clickTimer.value = setInterval(async () => {
    clock.value = dayjs().format("YYYY.MM.DD HH:mm:ss");
  }, 1000);
};
// 清空间接调用
const clearClock = () => {
  clearInterval(clickTimer.value);
};
const getTemperature = (temp?: string) => {
  return temp ? `${temp}℃` : "-";
};
const toFullScreen = () => {
  toggle();
};
</script>
<template>
  <div class="page-container">
    <div class="leader-screen-page">
      <!-- 头部 -->
      <header class="page-header">
        <!-- 天气 -->
        <div class="current-weather">
          <i :class="`qi-${weatherData.icon}-fill`" />
          <span class="ml-8 icon-text">{{ weatherData.text }}</span>
          <span class="ml-8">
            <span class="start">{{ getTemperature(weatherData.tempMin) }}</span
            >-<span class="end">{{ getTemperature(weatherData.tempMax) }}</span>
          </span>
          <span class="ml-8"> {{ weatherData.windDir }}{{ weatherData.windScale }}级 </span>
        </div>
        <!-- 标题 -->
        <div class="header"></div>
        <!-- 时间 -->
        <div class="date">{{ clock }}</div>
      </header>
      <main class="page-body">
        <TopSection />
        <MiddleSection />
        <BottomSection />
      </main>
    </div>
    <div v-if="!isFullscreen" class="full-screen">
      <fullScreen class="icon" @click="toFullScreen" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.page-container {
  background: linear-gradient(180deg, #222e73 0%, #070d2f 100%);
  box-shadow: inset 0px 0px 200px 0px #091228;
  position:relative .full-screen {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
    background-color: var(--px-color-primary-light-9);
    border-radius: 4px;
    box-shadow: 0 0 4px 0 var(--px-color-primary-light-3);

    .icon {
      width: 70%;
      height: 70%;
      color: #00c2ff;
    }

    &:hover {
      background-color: var(--px-color-primary-light-7);
      box-shadow: none;
    }
  }
}
.leader-screen-page {
  width: 100vw;
  height: 100vh;
  box-shadow: inset 0px 0px 200px 0px #091228;
  background-image: url("/ifp-web-static/image/all/leadScreenNew/bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  overflow: hidden;
}
.page-header {
  height: 43rpx;
  padding: 0 24rpx;
  margin-bottom: 8rpx;
  display: flex;
  justify-content: space-between;
  position: relative;
  .ml-8 {
    margin-left: 8px;
  }
  .current-weather {
    font-size: 14rpx;
    font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 20rpx;
    padding-top: 12rpx;
  }
  .header {
    width: 329rpx;
    height: 39rpx;
    background: url("/ifp-web-static/image/all/leadScreenNew/header_title.png") no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    margin-top: 8rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .date {
    font-size: 16rpx;
    font-family: AlibabaPuHuiTiM;
    color: #3cb1fb;
    line-height: 22rpx;
    padding: 13rpx 0 8rpx 0;
  }
}
.page-body {
  padding: 0 24rpx;
}
</style>
